<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Title</title>
    <link rel="stylesheet" href="css/font/iconfont.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/xiaomi.css">
    <link rel="stylesheet" href="js/swiper/swiper-3.4.2.min.css">
    <script src="js/swiper/swiper-3.4.2.min.js"></script>
    <script src="js/jquery.js"></script>
</head>
<body>
<header>
    <div id="header_img">
        <img src="img/xiaomi_01.jpg" alt="">
    </div>
    <div class="nav">
        <div class="nav_center">
            <ul id="nav_left">
                <li><a href="#">小米商城</a>
                </li>
                <li><a href="#">MIUI</a>
                </li>
                <li><a href="#">米聊</a>
                </li>
                <li><a href="#">游戏</a>
                </li>
                <li><a href="#">多看阅读</a>
                </li>
                <li><a href="#">云服务</a>
                </li>
                <li><a href="#">金融</a></li>
                <li><a href="#">小米商城移动版</a>
                </li>
                <li><a href="#">问题反馈</a>
                </li>
                <li><a href="#">Select Region</a>
                </li>
            </ul>
            <span id="shopping">购物车</span>
            <ul id="nav_right">
                <li><a hef="#">登录</a></li>
                <li><a hef="#">注册</a></li>
                <li><a hef="#">消息通知</a></li>

            </ul>
        </div>
    </div>
    <div class="seek" id="header_seek">
        <div class="seek_img">
            <img src="img/xiaomi (1).jpg" alt="">
            <img src="img/xiaomi (12).jpg" alt="">
        </div>
        <ul id="hd_seek">
            <li><a href="">小米手机</a>
                <div class="xl">
                    <ol>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu.png" alt="">

                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu.png" alt="">

                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu.png" alt="">

                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu.png" alt="">

                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                    </ol>
                </div>
            </li>
            <li><a href="">红米</a>
                <div class="xl">
                    <ol>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu2.jpg" alt="">
                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu2.jpg" alt="">
                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu.png" alt="">
                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu.png" alt="">

                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                    </ol>
                </div>
            </li>
            <li><a href="">平板 · 笔记本</a>
                <div class="xl">
                    <ol>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu3.jpg" alt="">
                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu2.jpg" alt="">
                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu.png" alt="">
                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu.png" alt="">

                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                    </ol>
                </div>
            </li>
            <li><a href="">电视</a>
                <div class="xl">
                    <ol>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu2.jpg" alt="">
                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu2.jpg" alt="">
                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu3.jpg" alt="">
                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu.png" alt="">

                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                    </ol>
                </div>
            </li>
            <li><a href="">盒子 · 影音</a>
                <div class="xl">
                    <ol>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu3.jpg" alt="">
                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu2.jpg" alt="">
                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu.png" alt="">
                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu.png" alt="">

                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                    </ol>
                </div>
            </li>
            <li><a href="">路由器</a>
                <div class="xl">
                    <ol>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu2.jpg" alt="">
                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu2.jpg" alt="">
                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu.png" alt="">
                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu.png" alt="">

                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                    </ol>
                </div>
            </li>
            <li><a href="">智能硬件</a>
                <div class="xl">
                    <ol>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu2.jpg" alt="">
                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu2.jpg" alt="">
                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu.png" alt="">
                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu.png" alt="">

                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                    </ol>
                </div>
            </li>
            <li><a href="">服务</a>

                <div class="xl">
                    <ol>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu2.jpg" alt="">
                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu2.jpg" alt="">
                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu.png" alt="">
                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                        <li>
                            <div class="toubuPic">
                                <img src="img/toubu.png" alt="">

                            </div>
                            <p>小米6</p>
                            <span>1200元起</span>
                        </li>
                    </ol>
                </div>
            </li>
            <li><a href="">社区</a>
                <!--<div class="xl">-->
                <!--<ol>-->
                <!--<li>00000001</li>-->
                <!--<li>00000002</li>-->
                <!--<li>00000003</li>-->
                <!--<li>00000004</li>-->
                <!--<li>00000005</li>-->
                <!--<li>00000006</li>-->
                <!--<li>00000007</li>-->
                <!--<li>00000008</li>-->
                <!--<li>00000009</li>-->
                <!--</ol>-->
                <!--</div>-->
            </li>
        </ul>

        <div class="seek_input">
            <input type="text">
            <button></button>
            <div class="seek_span">
                <span>电视4A49"特惠</span>
                <span>小米5c立减200</span>
            </div>

        </div>


    </div>
    <!--   <ol id="hd_seek1">
           <li>00000001</li>
           <li>00000002</li>
           <li>00000003</li>
           <li>00000004</li>
           <li>00000005</li>
           <li>00000006</li>
           <li>00000007</li>
           <li>00000008</li>
           <li>00000009</li>
       </ol>-->
</header>

<section>
    <div class="banner">
        <!--    海报分类-->
        <div class="banner_nav">
            <ul>
                <li class="clear">
                    <span><a href="#">手机</a></span>
                    <span><a href="#">电话卡</a></span>
                    <i class="iconfont icon-houtuiqianjin1 fh"></i>
                    <ol class="banner_nav_show clear">
                        <li>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                        </li>
                        <li>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                        </li>

                    </ol>
                </li>
                <li class="clear">
                    <span><a href="#">手机</a></span>
                    <span><a href="#">电话卡</a></span>
                    <i class="iconfont icon-houtuiqianjin1 fh"></i>
                    <ol class="banner_nav_show clear">
                        <li>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                        </li>
                        <li>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                        </li>
                        <li>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                        </li>
                    </ol>
                </li>
                <li class="clear">
                    <span><a href="#">手机</a></span>
                    <span><a href="#">电话卡</a></span>
                    <i class="iconfont icon-houtuiqianjin1 fh"></i>
                    <ol class="banner_nav_show clear">
                        <li>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                        </li>
                    </ol>
                </li>
                <li class="clear">
                    <span><a href="#">手机</a></span>
                    <span><a href="#">电话卡</a></span>
                    <i class="iconfont icon-houtuiqianjin1 fh"></i>
                    <ol class="banner_nav_show clear">
                        <li>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                        </li>
                        <li>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                        </li>
                    </ol>
                </li>
                <li class="clear">
                    <span><a href="#">手机</a></span>
                    <span><a href="#">电话卡</a></span>
                    <i class="iconfont icon-houtuiqianjin1 fh"></i>
                    <ol class="banner_nav_show clear">
                        <li>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                        </li>
                        <li>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                        </li>
                    </ol>
                </li>
                <li class="clear">
                    <span><a href="#">手机</a></span>
                    <span><a href="#">电话卡</a></span>
                    <i class="iconfont icon-houtuiqianjin1 fh"></i>
                    <ol class="banner_nav_show clear">
                        <li>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                        </li>
                        <li>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                        </li>
                    </ol>
                </li>
                <li class="clear">
                    <span><a href="#">手机</a></span>
                    <span><a href="#">电话卡</a></span>
                    <i class="iconfont icon-houtuiqianjin1 fh"></i>
                    <ol class="banner_nav_show clear">
                        <li>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                        </li>
                        <li>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                        </li>
                    </ol>
                </li>
                <li class="clear">
                    <span><a href="#">手机</a></span>
                    <span><a href="#">电话卡</a></span>
                    <i class="iconfont icon-houtuiqianjin1 fh"></i>
                    <ol class="banner_nav_show clear">
                        <li>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                        </li>
                        <li>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                        </li>
                    </ol>
                </li>
                <li class="clear">
                    <span><a href="#">手机</a></span>
                    <span><a href="#">电话卡</a></span>
                    <i class="iconfont icon-houtuiqianjin1 fh"></i>
                    <ol class="banner_nav_show clear">
                        <li>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                        </li>
                    </ol>
                </li>
                <li class="clear">
                    <span><a href="#">手机</a></span>
                    <span><a href="#">电话卡</a></span>
                    <i class="iconfont icon-houtuiqianjin1 fh"></i>
                    <ol class="banner_nav_show clear">
                        <li>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                        </li>
                        <li>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                        </li>
                        <li>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                        </li>
                        <li>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                            <div class="banner_list">
                                <img src="img/xm6_80.png" alt="">
                                <span>魅族</span>
                                <span class="ba_l_right">选择</span>
                            </div>
                        </li>
                    </ol>
                </li>
            </ul>
        </div>

        <!--    轮播-->
        <div class="banner_banner">
            <div class="swiper-container banner">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="img/banner1.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="img/banner1.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="img/banner1.jpg" alt=""></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination banner_fy"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev banner_prev"></div>
                <div class="swiper-button-next banner_next"></div>

                <!-- 如果需要滚动条 -->
                <!--<div class="swiper-scrollbar"></div>-->
            </div>
        </div>


        <!--    轮播下 分类-->
        <div class="banner_seek">
            <div class="banner_activity">
                <div class="b_a_row">
                    <span>
                        <img src="img/xiaomi (7).jpg" alt="">
                        <p>选购手机</p>
                        <div class="yuan"></div>
                    </span>
                    <span>
                        <img src="img/xiaomi (7).jpg" alt="">
                        <p>选购手机</p>
                         <div class="yuan"></div>
                    </span>
                    <span>
                        <img src="img/xiaomi (7).jpg" alt="">
                        <p>选购手机</p>
                         <div class="yuan"></div>
                    </span>
                </div>
                <div class="b_a_row">
                    <span>
                        <div class="yuan2"></div>
                        <img src="img/xiaomi (7).jpg" alt="">
                        <p>选购手机</p>
                        <div class="yuan"></div>
                    </span>
                    <span>
                        <img src="img/xiaomi (7).jpg" alt="">
                        <p>选购手机</p>
                        <div class="yuan"></div>
                    </span>
                    <span>
                        <img src="img/xiaomi (7).jpg" alt="">
                        <p>选购手机</p>
                        <div class="yuan"></div>
                    </span>
                </div>
            </div>
            <div class="banner_seek_img">
                <img src="img/xiaomi (8).jpg" alt="">
            </div>
            <div class="banner_seek_img">
                <img src="img/xiaomi (9).jpg" alt="">
            </div>
            <div class="banner_seek_img">
                <img src="img/xiaomi (10).jpg" alt="">
            </div>
        </div>
    </div>
    <div class="star">
        <div class="swiper-container star_banner">
            <!--         头部       -->
            <div class="star_title">
                小米明星单品
                <p>
                    <span><i class="iconfont icon-houtuiqianjin jt" class="star_left"></i></span><span><i
                        class="iconfont icon-houtuiqianjin1 jt" clsss="star_right"></i></span>
                </p>
            </div>

            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <ul class="clear">
                        <li class="star_div">
                            <img src="img/mi (50).jpg" alt="">
                            <a href="#"><i>红米Note 4X</i></a>
                            <span>4100mAh超长续航，多彩金属</span>
                            <p>999元起</p>
                        </li>
                        <li class="star_div">
                            <img src="img/mi (50).jpg" alt="">
                            <a href="#"><i>红米Note 4X</i></a>
                            <span>4100mAh超长续航，多彩金属</span>
                            <p>999元起</p>
                        </li>
                        <li class="star_div">
                            <img src="img/mi (50).jpg" alt="">
                            <a href="#"><i>红米Note 4X</i></a>
                            <span>4100mAh超长续航，多彩金属</span>
                            <p>999元起</p>
                        </li>
                        <li class="star_div">
                            <img src="img/mi (50).jpg" alt="">
                            <a href="#"><i>红米Note 4X</i></a>
                            <span>4100mAh超长续航，多彩金属</span>
                            <p>999元起</p>
                        </li>
                        <li class="star_div">
                            <img src="img/mi (50).jpg" alt="">
                            <a href="#"><i>红米Note 4X</i></a>
                            <span>4100mAh超长续航，多彩金属</span>
                            <p>999元起</p>
                        </li>
                    </ul>
                </div>
                <div class="swiper-slide">
                    <ul class="clear">
                        <li class="star_div">
                            <img src="img/mi (50).jpg" alt="">
                            <a href="#"><i>红米Note 4X</i></a>
                            <span>4100mAh超长续航，多彩金属</span>
                            <p>999元起</p>
                        </li>
                        <li class="star_div">
                            <img src="img/mi (50).jpg" alt="">
                            <a href="#"><i>红米Note 4X</i></a>
                            <span>4100mAh超长续航，多彩金属</span>
                            <p>999元起</p>
                        </li>
                        <li class="star_div">
                            <img src="img/mi (50).jpg" alt="">
                            <a href="#"><i>红米Note 4X</i></a>
                            <span>4100mAh超长续航，多彩金属</span>
                            <p>999元起</p>
                        </li>
                        <li class="star_div">
                            <img src="img/mi (50).jpg" alt="">
                            <a href="#"><i>红米Note 4X</i></a>
                            <span>4100mAh超长续航，多彩金属</span>
                            <p>999元起</p>
                        </li>
                        <li class="star_div">
                            <img src="img/mi (50).jpg" alt="">
                            <a href="#"><i>红米Note 4X</i></a>
                            <span>4100mAh超长续航，多彩金属</span>
                            <p>999元起</p>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev star_left"></div>
            <div class="swiper-button-next star_right"></div>

        </div>
    </div>

    <!--    家电-->
    <div class="family">
        <div class="family_contetnt clear">
            <div class="family_title clear">
                <span>家电</span>
                <ul class="clear">
                    <li class="active"><a href="#">热门</a></li>
                    <li><a href="#">电视影音</a></li>
                    <li><a href="#">电脑</a></li>
                    <li><a href="#">家居</a></li>
                </ul>
            </div>
            <div class="family_left">
                <img src="img/mi (71).jpg" alt="">
            </div>
            <div class="family_right">
                <ul>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                        <span><del>999元起</del></span>
                        <div class="location" style="background: #E53935">享受9折</div>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                        <div class="location" style="background: #83C44E">享受9折</div>

                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!--    智能-->
    <div class="family">
        <div class="family_contetnt clear">
            <div class="family_title clear">
                <span>智能</span>
                <ul class="clear">
                    <li class="active"><a href="#">热门</a></li>
                    <li><a href="#">电视影音</a></li>
                    <li><a href="#">电脑</a></li>
                    <li><a href="#">家居</a></li>
                </ul>
            </div>
            <div class="family_left">
                <img src="img/mi (69).jpg" alt="">
                <img src="img/mi (70).jpg" alt="">
            </div>
            <div class="family_right">
                <ul>
                    <li>
                        <div class="location" style="background: #83C44E">享受9折</div>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                        <span><del>999元起</del></span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <div class="location" style="background: #ff6700">享受9折</div>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!--    搭配-->
    <div class="family">
        <div class="family_contetnt clear">
            <div class="family_title clear">
                <span>搭配</span>
                <ul class="clear">
                    <li class="active"><a href="#">热门</a></li>
                    <li><a href="#">电视影音</a></li>
                    <li><a href="#">电脑</a></li>
                    <li><a href="#">家居</a></li>
                </ul>
            </div>
            <div class="family_left">
                <img src="img/mi (68).jpg" alt="">
                <img src="img/mi (67).jpg" alt="">
            </div>
            <div class="family_right">
                <ul>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                        <span><del>999元起</del></span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!--    配件-->
    <div class="family">
        <div class="family_contetnt clear">
            <div class="family_title clear">
                <span>配件</span>
                <ul class="clear">
                    <li class="active"><a href="#">热门</a></li>
                    <li><a href="#">电视影音</a></li>
                    <li><a href="#">电脑</a></li>
                    <li><a href="#">家居</a></li>
                </ul>
            </div>
            <div class="family_left">
                <img src="img/mi (66).jpg" alt="">
                <img src="img/mi (65).jpg" alt="">
            </div>
            <div class="family_right">
                <ul>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                        <span><del>999元起</del></span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!--    周边-->
    <div class="family">
        <div class="family_contetnt clear">
            <div class="family_title clear">
                <span>周边</span>
                <ul class="clear">
                    <li class="active"><a href="#">热门</a></li>
                    <li><a href="#">电视影音</a></li>
                    <li><a href="#">电脑</a></li>
                    <li><a href="#">家居</a></li>
                </ul>
            </div>
            <div class="family_left">
                <img src="img/mi (64).jpg" alt="">
                <img src="img/mi (63).jpg" alt="">
            </div>
            <div class="family_right">
                <ul>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                        <span><del>999元起</del></span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                    <li>
                        <img src="img/mi (49).jpg" alt="">
                        <a href="#"><i>红米Note 4X</i></a>
                        <p>4100mAh超长续航，多彩金属</p>
                        <span>999元起</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!--    为你推荐-->
    <div class="family">
        <div class="family_contetnt clear">
            <div class="family_right your">

                <div class="swiper-container yours">
                    <div class="star_title">
                        为你推荐
                        <p>
                            <span><i class="iconfont icon-houtuiqianjin jt" class="star_left"></i></span><span><i
                                class="iconfont icon-houtuiqianjin1 jt" class="star_right"></i></span>
                        </p>
                    </div>


                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <ul>
                                <li>
                                    <img src="img/mi (49).jpg" alt="">
                                    <a href="#"><i>红米Note 4X</i></a>
                                    <p>4100mAh超长续航，多彩金属</p>
                                    <span>999元起</span>
                                    <span><del>999元起</del></span>
                                </li>
                                <li>
                                    <img src="img/mi (49).jpg" alt="">
                                    <a href="#"><i>红米Note 4X</i></a>
                                    <p>4100mAh超长续航，多彩金属</p>
                                    <span>999元起</span>
                                    <span><del>999元起</del></span>
                                </li>
                                <li>
                                    <img src="img/mi (49).jpg" alt="">
                                    <a href="#"><i>红米Note 4X</i></a>
                                    <p>4100mAh超长续航，多彩金属</p>
                                    <span>999元起</span>
                                </li>
                                <li>
                                    <img src="img/mi (49).jpg" alt="">
                                    <a href="#"><i>红米Note 4X</i></a>
                                    <p>4100mAh超长续航，多彩金属</p>
                                    <span>999元起</span>
                                </li>
                                <li>
                                    <img src="img/mi (49).jpg" alt="">
                                    <a href="#"><i>红米Note 4X</i></a>
                                    <p>4100mAh超长续航，多彩金属</p>
                                    <span>999元起</span>
                                </li>

                            </ul>
                        </div>
                        <div class="swiper-slide">
                            <ul>
                                <li>
                                    <img src="img/mi (49).jpg" alt="">
                                    <a href="#"><i>红米Note 4X</i></a>
                                    <p>4100mAh超长续航，多彩金属</p>
                                    <span>999元起</span>
                                    <span><del>999元起</del></span>
                                </li>
                                <li>
                                    <img src="img/mi (49).jpg" alt="">
                                    <a href="#"><i>红米Note 4X</i></a>
                                    <p>4100mAh超长续航，多彩金属</p>
                                    <span>999元起</span>
                                    <span><del>999元起</del></span>
                                </li>
                                <li>
                                    <img src="img/mi (49).jpg" alt="">
                                    <a href="#"><i>红米Note 4X</i></a>
                                    <p>4100mAh超长续航，多彩金属</p>
                                    <span>999元起</span>
                                </li>
                                <li>
                                    <img src="img/mi (49).jpg" alt="">
                                    <a href="#"><i>红米Note 4X</i></a>
                                    <p>4100mAh超长续航，多彩金属</p>
                                    <span>999元起</span>
                                </li>
                                <li>
                                    <img src="img/mi (49).jpg" alt="">
                                    <a href="#"><i>红米Note 4X</i></a>
                                    <p>4100mAh超长续航，多彩金属</p>
                                    <span>999元起</span>
                                </li>

                            </ul>
                        </div>
                    </div>
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev your_left"></div>
                    <div class="swiper-button-next your_right"></div>
                </div>

            </div>

        </div>
    </div>

    <!--热评产品-->
    <div class="product">
        <div class="star_title">
            热评产品
            <!-- <p>
                 <span><i class="iconfont icon-houtuiqianjin jt"></i></span><span><i
                     class="iconfont icon-houtuiqianjin1 jt"></i></span>
             </p>-->
        </div>
        <ul class="clear product_content">
            <li>
                <img src="img/mi (55).jpg" alt="">
                <div class="product_txt">
                    <div>超级喜欢!小乔玲珑!音质完美!不知道为什么!只要是小米出的东西我都喜欢!那倒是因为那一句??小米为发烧而生</div>
                    <p>来自于田密的评价</p>
                    <span>小米随身蓝牙音箱</span><span>69元</span>
                </div>
            </li>
            <li>
                <img src="img/mi (55).jpg" alt="">
                <div class="product_txt">
                    <div>超级喜欢!小乔玲珑!音质完美!不知道为什么!只要是小米出的东西我都喜欢!那倒是因为那一句??小米为发烧而生</div>
                    <p>来自于田密的评价</p>
                    <span>小米随身蓝牙音箱</span><span class="money">69元</span>
                </div>
            </li>
            <li>
                <img src="img/mi (55).jpg" alt="">
                <div class="product_txt">
                    <div>超级喜欢!小乔玲珑!音质完美!不知道为什么!只要是小米出的东西我都喜欢!那倒是因为那一句??小米为发烧而生</div>
                    <p>来自于田密的评价</p>
                    <span>小米随身蓝牙音箱</span><span>69元</span>
                </div>
            </li>
            <li>
                <img src="img/mi (55).jpg" alt="">
                <div class="product_txt">
                    <div>超级喜欢!小乔玲珑!音质完美!不知道为什么!只要是小米出的东西我都喜欢!那倒是因为那一句??小米为发烧而生</div>
                    <p>来自于田密的评价</p>
                    <span>小米随身蓝牙音箱</span><span>69元</span>
                </div>
            </li>
        </ul>
    </div>

    <!--    内容-->
    <div class="product">
        <div class="star_title">
            内容
            <!-- <p>
                 <span><i class="iconfont icon-houtuiqianjin jt"></i></span><span><i
                     class="iconfont icon-houtuiqianjin1 jt"></i></span>
             </p>-->
        </div>
        <ul class="clear product_content content">
            <li class="book">
                <i>图书</i>
                <!---->
                <div class="swiper-container book_one">
                    <div class="swiper-wrapper book_one">
                        <div class="swiper-slide">
                            <div class="product_txt content ">
                                <p>来自于田密的评价</p>
                                <div>"哈利·波特"第八个故事中文版震撼来袭!特别彩排版剧本!</div>
                                <span>小米随身蓝牙音箱</span>
                            </div>
                            <img src="img/mi (4).jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <div class="product_txt content ">
                                <p>来自于田密的评价</p>
                                <div>"哈利·波特"第八个故事中文版震撼来袭!特别彩排版剧本!</div>
                                <span>小米随身蓝牙音箱</span>
                            </div>
                            <img src="img/mi (4).jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <div class="product_txt content ">
                                <p>来自于田密的评价</p>
                                <div>"哈利·波特"第八个故事中文版震撼来袭!特别彩排版剧本!</div>
                                <span>小米随身蓝牙音箱</span>
                            </div>
                            <img src="img/mi (4).jpg" alt="">
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev book_one_prev"></div>
                    <div class="swiper-button-next book_one_next"></div>

                </div>
                <!---->
                <ol class="clear">
                    <li class="ol_active"></li>
                    <li></li>
                    <li></li>
                </ol>

            </li>
            <li class="book">
                <i>图书</i>
                <!---->
                <div class="swiper-container book_one">
                    <div class="swiper-wrapper book_one">
                        <div class="swiper-slide">
                            <div class="product_txt content ">
                                <p>来自于田密的评价</p>
                                <div>"哈利·波特"第八个故事中文版震撼来袭!特别彩排版剧本!</div>
                                <span>小米随身蓝牙音箱</span>
                            </div>
                            <img src="img/mi (4).jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <div class="product_txt content ">
                                <p>来自于田密的评价</p>
                                <div>"哈利·波特"第八个故事中文版震撼来袭!特别彩排版剧本!</div>
                                <span>小米随身蓝牙音箱</span>
                            </div>
                            <img src="img/mi (4).jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <div class="product_txt content ">
                                <p>来自于田密的评价</p>
                                <div>"哈利·波特"第八个故事中文版震撼来袭!特别彩排版剧本!</div>
                                <span>小米随身蓝牙音箱</span>
                            </div>
                            <img src="img/mi (4).jpg" alt="">
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev book_one_prev"></div>
                    <div class="swiper-button-next book_one_next"></div>

                </div>
                <!---->
                <ol class="clear">
                    <li class="ol_active"></li>
                    <li></li>
                    <li></li>
                </ol>

            </li>
            <li class="book">
                <i>图书</i>
                <!---->
                <div class="swiper-container book_one">
                    <div class="swiper-wrapper book_one">
                        <div class="swiper-slide">
                            <div class="product_txt content ">
                                <p>来自于田密的评价</p>
                                <div>"哈利·波特"第八个故事中文版震撼来袭!特别彩排版剧本!</div>
                                <span>小米随身蓝牙音箱</span>
                            </div>
                            <img src="img/mi (4).jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <div class="product_txt content ">
                                <p>来自于田密的评价</p>
                                <div>"哈利·波特"第八个故事中文版震撼来袭!特别彩排版剧本!</div>
                                <span>小米随身蓝牙音箱</span>
                            </div>
                            <img src="img/mi (4).jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <div class="product_txt content ">
                                <p>来自于田密的评价</p>
                                <div>"哈利·波特"第八个故事中文版震撼来袭!特别彩排版剧本!</div>
                                <span>小米随身蓝牙音箱</span>
                            </div>
                            <img src="img/mi (4).jpg" alt="">
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev book_one_prev"></div>
                    <div class="swiper-button-next book_one_next"></div>

                </div>
                <!---->
                <ol class="clear">
                    <li class="ol_active"></li>
                    <li></li>
                    <li></li>
                </ol>

            </li>
            <li class="book">
                <i>图书</i>
                <!---->
                <div class="swiper-container book_one">
                    <div class="swiper-wrapper book_one">
                        <div class="swiper-slide">
                            <div class="product_txt content ">
                                <p>来自于田密的评价</p>
                                <div>"哈利·波特"第八个故事中文版震撼来袭!特别彩排版剧本!</div>
                                <span>小米随身蓝牙音箱</span>
                            </div>
                            <img src="img/mi (4).jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <div class="product_txt content ">
                                <p>来自于田密的评价</p>
                                <div>"哈利·波特"第八个故事中文版震撼来袭!特别彩排版剧本!</div>
                                <span>小米随身蓝牙音箱</span>
                            </div>
                            <img src="img/mi (4).jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <div class="product_txt content ">
                                <p>来自于田密的评价</p>
                                <div>"哈利·波特"第八个故事中文版震撼来袭!特别彩排版剧本!</div>
                                <span>小米随身蓝牙音箱</span>
                            </div>
                            <img src="img/mi (4).jpg" alt="">
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev book_one_prev"></div>
                    <div class="swiper-button-next book_one_next"></div>

                </div>
                <!---->
                <ol class="clear">
                    <li class="ol_active"></li>
                    <li></li>
                    <li></li>
                </ol>

            </li>
        </ul>
    </div>

    <!--    视频-->
    <div class="product">
        <div class="star_title">
            视频
            <p>查看全部 <i class="iconfont icon-tiaozhuan qb"></i></p>
        </div>
        <ul class="clear product_content video">
            <li>
                <img src="img/mi (57).jpg" alt="">
                <img src="img/stop_03.jpg" alt="" class="stop">
                <div class="product_txt">
                    <span>听雷总讲述小米7年公益探索之路年公</span>
                    <p>小米6,7年公益探索的巅峰之作</p>
                </div>
            </li>
            <li>
                <img src="img/mi (58).jpg" alt="">
                <img src="img/stop_03.jpg" alt="" class="stop">

                <div class="product_txt">
                    <span>听雷总讲述小米7年公益探索之路</span>
                    <p>小米6,7年公益探索的巅峰之作</p>
                </div>
            </li>
            <li>
                <img src="img/mi (57).jpg" alt="">
                <img src="img/stop_03.jpg" alt="" class="stop">

                <div class="product_txt">
                    <span>听雷总讲述小米7年公益探索之路</span>
                    <p>小米6,7年公益探索的巅峰之作</p>
                </div>
            </li>
            <li>
                <img src="img/mi (58).jpg" alt="">
                <img src="img/stop_03.jpg" alt="" class="stop">

                <div class="product_txt">
                    <span>听雷总讲述小米7年公益探索之路</span>
                    <p>小米6,7年公益探索的巅峰之作</p>
                </div>
            </li>
        </ul>
    </div>
</section>

<footer>
    <ul class="footer_header clear">
        <li>
            <span>预约维修服务</span>
        </li>
        <li>
            <span>7天物理与退货</span>
        </li>
        <li>
            <span>15天免费换货</span>
        </li>
        <li>
            <span>满150元包邮</span>
        </li>
        <li>
            <span>520余家售后网点</span>
        </li>
    </ul>
    <div class="footer_body clear">
        <ul>
            <li><a href="#">服务中心</a></li>
            <li><a href="#">账号管理</a></li>
            <li><a href="#">购物指南</a></li>
            <li><a href="#">订单操作</a></li>
        </ul>
        <ul>
            <li><a href="#">服务中心</a></li>
            <li><a href="#">账号管理</a></li>
            <li><a href="#">购物指南</a></li>
            <li><a href="#">订单操作</a></li>
        </ul>
        <ul>
            <li><a href="#">服务中心</a></li>
            <li><a href="#">账号管理</a></li>
            <li><a href="#">购物指南</a></li>
            <li><a href="#">订单操作</a></li>
        </ul>
        <ul>
            <li><a href="#">服务中心</a></li>
            <li><a href="#">账号管理</a></li>
            <li><a href="#">购物指南</a></li>
            <li><a href="#">订单操作</a></li>
        </ul>
        <ul>
            <li><a href="#">服务中心</a></li>
            <li><a href="#">账号管理</a></li>
            <li><a href="#">购物指南</a></li>
            <li><a href="#">订单操作</a></li>
        </ul>
        <ul>
            <li><a href="#">服务中心</a></li>
            <li><a href="#">账号管理</a></li>
            <li><a href="#">购物指南</a></li>
            <li><a href="#">订单操作</a></li>
        </ul>
        <div class="footer_body_div">
            <p><a href="#">小米客服</a></p>
            <p><a href="#">7*24小时全天陪伴</a></p>
            <p><a href="#">为您解决问题</a></p>
            <div class="btn">
                <span>立即开始咨询</span>
            </div>
        </div>
    </div>
    <div class="footer_b_bottom">
        <div class="footer_bottom clear">
            <img src="img/xiaomi (1).jpg" alt="" class="logo">
            <div class="f_b_txt">
                <p><span>小米商城</span><span>MIUI</span><span>多看书城</span><span>视频电话</span><span>小米天猫店</span><span>小米淘宝直营店
            </span><span>小米网盟</span><span>小米移动</span><span>隐私政策</span><span>select Region</span></p>
                <p><span>小米商城</span><span>MIUI</span><span>多看书城</span><span>视频电话</span><span>小米天猫店</span><span>小米淘宝直营店
            </span><span>小米网盟</span><span>小米移动</span><span>隐私政策</span><span>select Region</span></p>
                <p><span>小米商城</span><span>MIUI</span><span>多看书城</span><span>视频电话</span><span>小米天猫店</span><span>小米淘宝直营店
            </span><span>小米网盟</span><span>小米移动</span><span>隐私政策</span><span>select Region</span></p>
            </div>
            <div class="f_b_logo">
                <img src="img/xiaom (5).jpg" alt="">
                <img src="img/xiaom (4).jpg" alt="">
                <img src="img/xiaom (3).jpg" alt="">
                <img src="img/xiaom (2).jpg" alt="">
            </div>
        </div>
    </div>
</footer>

</body>
</html>


<script src="js/jquery.js"></script>
<script src="js/xiaomi.js"></script>
<script>
    var mySwiper = new Swiper('.banner', {
//        direction: 'vertical',
        loop: true,
        autoplay: 2000,

        // 如果需要分页器
        pagination: '.banner_fy',

        // 如果需要前进后退按钮
        nextButton: '.banner_next',
        prevButton: '.banner_prev',

    })


    var mySwiper2 = new Swiper('.star_banner', {
//        direction: 'vertical',
        loop: true,
        autoplay: 4000,

        // 如果需要前进后退按钮
        nextButton: '.star_right',
        prevButton: '.star_left',

    })

    var mySwiper3 = new Swiper('.yours', {
//        direction: 'vertical',
        loop: true,
        autoplay: 4000,

        // 如果需要前进后退按钮
        nextButton: '.your_right',
        prevButton: '.your_left',

    })

    //    内容1
    var mySwiper4 = new Swiper('.book_one', {
        loop: true,

        // 如果需要分页器
        pagination: '.swiper-pagination',

        // 如果需要前进后退按钮
        nextButton: '.book_one_next',
        prevButton: '.book_one_prev',

    })

    //     fnTab('header_seek','hover')

</script>



























































